<html>
<head>
<title>dojox.html.styles Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css" rel="stylesheet" title="dojoDefault">
	@import "../../../dojo/resources/dojo.css";
	@import "../../../dijit/tests/css/dijitTests.css";
</style>

<style title="altStyle" type="text/css" rel="alternate stylesheet">
	p{
		font-size:9px;
		color:#9999FF;
	}
</style>

<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug: true, fontSizeWatch: true"></script>
<script type="text/javascript">
	
	dojo.require("dojox.html.styles");
	
	getSelectedStyleSheet = function(){
		if(dojo.byId("ssDefault").checked) return false;
		if(dojo.byId("ssExtra").checked) return "ssExtra";
	}
	
	enableStyleSheet = function(){
		dojox.html.enableStyleSheet(getSelectedStyleSheet());
	}
	
	disableStyleSheet = function(){
		dojox.html.disableStyleSheet(getSelectedStyleSheet());
	}
	dojo.addOnLoad(function(){
		console.log(dojo.version.toString());
		var styles = [
			"p { font-size:24; margin:20px;}",
			"p { font-size:12; color:#ff0000;}",
			".woot { color:#ff0000; }",
			".woot { color:#00ff00; }",
			"p span {font-weight:bold;}",
			"span {font-style:italic;}"
		]
		
		var col = dojo.byId("btnCol");
		dojo.forEach(styles, function(s){
		
			var sel = s.substring(0,s.indexOf("{")-1);
			var des = s.substring(s.indexOf("{")+1, s.indexOf("}") );
			
			var div = dojo.doc.createElement("div");
			col.appendChild(div);
			
			var d = dojo.doc.createElement("span");
			dojo.style(d, "display", "block");
			d.innerHTML = s;
			div.appendChild(d);
			
			var b = dojo.doc.createElement("button");
			div.appendChild(b);
			b.innerHTML = "Insert";
			dojo.connect(b, "click", function(){
				console.log("Add:", s)
				dojox.html.insertCssRule(sel, des, getSelectedStyleSheet());
			});
			var b = dojo.doc.createElement("button");
			div.appendChild(b);
			b.innerHTML = "Remove";
			dojo.connect(b, "click", function(){
				console.log("Rem:", s);
				dojox.html.removeCssRule(sel, des);
			});
			
		});
		
		
		
		
		console.log("Style Sheets tests:");
		console.log("dojox.html.getStyleSheet [is false]:", dojox.html.getStyleSheet());
		// insert a style, which creates our dynamic style sheet:
		var sel = styles[0].substring(0,styles[0].indexOf("{")-1);
		var des = styles[0].substring(styles[0].indexOf("{")+1, styles[0].indexOf("}") );
		dojox.html.insertCssRule(sel, des, getSelectedStyleSheet());
		console.log("dojox.html.getStyleSheet [object is default]:", dojox.html.getStyleSheet());
		console.log("dojox.html.activeStyleSheet:", dojox.html.activeStyleSheet().title);
		dojo.forEach(dojox.html.getToggledStyleSheets(), function(s){
			console.log("    toggled style sheet:", s.title, "enabled:", !s.disabled);
		});
		var ss = dojox.html.getStyleSheets(); //return object
		for(var nm in ss){
			//display either title or href
			var name = (ss[nm].title)?ss[nm].title:ss[nm].href;
			if(!name){ name = "*Persistant*"}
			console.log("    style sheet:", name);
		}
		console.log("dojox.html.getStyleSheet [href:dijitTests.css, object]:", dojox.html.getStyleSheet("dijitTests.css"));
		console.log("dojox.html.getStyleSheet [title:BadStyleName]:", dojox.html.getStyleSheet("BadStyleName"));
	
	});

</script>
<style>
	#btnCol{
		width:220px;
	}
	#btnCol div{
		margin-bottom:10px;
	}
	body table td{
		vertical-align:top;
		
	}
	button{
		width:70px;
		text-align:left;
	}
	.label{
		color:#666666;
	}
</style>

</head>

<body>
<h1>dojox.html.styles Test</h1>
<p>With the buttons on the left, insert and remove rules with a dynamically created stylesheet. Use the radio buttons
to create a second style sheet. Toggle them on and off. See the log for more style sheet tests.</p>
	<table width="100%" cellspacing="0" cellpadding="0">
  <tr>
    <td id="btnCol">
    	<span class="label">Dynamic Stylesheets</span>
        <div>
        	<span style="display:block;">Use Style Sheet:</span>
            <label for="ssDefault">Default</label>
            <input type="radio" name="ss" id="ssDefault" checked="true"/>
            <label for="ssExtra">Extra</label>
            <input type="radio" name="ss" id="ssExtra" />
            <br>
            <button onClick="enableStyleSheet();">Enable</button>
            <button onClick="disableStyleSheet();">Disable</button>
        </div>
    </td>
    <td>
    	<p>paragraph text</p>
    
    <p class="foo">paragraph class=foo text
    	<span class="woot">span class=woot</span>
        with a span inside it
    </p>
    
    <p class="bar">paragraph class=bar text
    	<span class="zoot">span class=zoot</span>
    	with a span inside it
    </p>
     
     <span class="xoot">external span class=xoot</span>
    </td>
  </tr>
</table>
	
     
     
    	
</body>
</html>
